<template>
  <BKModal
    v-model="visible"
    width="70%"
    height="80%"
    title="点面折减系数"
  >
    <div class="full-box p-a-mini d-flex-c">
      <div
        class="flex-between"
        style="align-items: flex-start;"
      >
        <BKSelect
          v-model="type"
          dictionary-key="ysqjc_jc_fqmc"
          :clearable="false"
          size="mini"
          style="width: 200px;"
          class="m-b-mini"
          @change="fetchData"
        />
        <el-button
          type="primary"
          plain
          size="mini"
          @click="exportTableData"
        >
          导出
        </el-button>
      </div>
      <BKTable
        ref="grid"
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :has-pager="false"
        :has-seq="false"
        class="flex-1 overflow-hidden"
        :span-method="mergeRowMethod"
      />
    </div>
  </BKModal>
</template>

<script>
export default {
  name: 'TableModal',
  data () {
    return {
      visible: false,
      type: '1',
      tableData: [],
      loading: false
    }
  },
  computed: {
    columns () {
      return [
        { title: '历时', field: 'LS_TEXT' },
        { title: '重现期(年)', field: 'NYY' },
        {
          title: '面积(km²)',
          children: [
            { title: '0', field: 'M0' },
            { title: '50', field: 'M50' },
            { title: '100', field: 'M100' },
            { title: '200', field: 'M200' },
            { title: '300', field: 'M300' },
            { title: '500', field: 'M500' },
            { title: '800', field: 'M800' },
            { title: '1000', field: 'M1000' },
            { title: '1500', field: 'M1500', visible: this.type === '1' },
            { title: '2000', field: 'M2000', visible: this.type !== '1' }
          ]
        }
      ]
    }
  },
  methods: {
    open () {
      this.visible = true
      this.$nextTick(() => {
        this.fetchData(this.type)
      })
    },
    async fetchData (fq) {
      this.loading = true
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'YSQJC_BYTJ_MYLAP',
        methodCode: 'select',
        methodParams: {
          queryParam: { FQ: fq }
        }
      })
      this.tableData = rows
      this.loading = false
    },
    mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
      const fields = ['LS_TEXT']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    async exportTableData () {
      const { fileName, data } = await this.$request.getFileStreamByPost('/grid/export', {
        isMultiple: '1',
        excelTitle: '点面折减系数表',
        appId: 'YSJC',
        bzCode: 'YSJC',
        metaSet: this.type === '1' ? 'YSQJC_BYTJ_MYLAP_DC1' : 'YSQJC_BYTJ_MYLAP_DC2',
        methodCode: 'select',
        methodParams: JSON.stringify({ queryParam: { FQ: this.type } }),
        metaWidthMap: JSON.stringify({ LS: 120, NYY: 120, M0: 120, M50: 120, M100: 120, M200: 120, M300: 120, M500: 120, M800: 120, M1000: 120, M1500: 120, M2000: 120 })
      })
      this.$request.downloadBlobFile(data, fileName)
    }
  }
}
</script>
